<template>
    <div>
      <!-- 商品分类 -->
      <!-- 面包屑 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        <el-breadcrumb-item>商品分类</el-breadcrumb-item>
      </el-breadcrumb>
      <!-- 内容区 -->
      <el-card>
        <el-button type="primary" class="addclass" @click="addclass">添加分类</el-button>
        <!-- 添加分类弹出框 -->
        <el-dialog
          title="提示"
          :visible.sync="addshow"
          width="30%">
          <el-form :model="thisgoods" :rules="rules" ref="goodsFrom" label-width="100px" class="demo-ruleForm">
            <el-form-item label="分类名称" prop="cat_name">
              <el-input v-model="thisgoods.cat_name"></el-input>
            </el-form-item>
          </el-form>
          <el-form label-width="100px" class="demo-ruleForm">
            <el-form-item label="选择分类">
               <el-cascader @change='changegoods' :props="defaultProps" 
               :options="goodslist" clearable v-model="goodsclassid"
                change-on-select></el-cascader>
            </el-form-item>
          </el-form>
         
          <span slot="footer" class="dialog-footer">
            <el-button @click="addshow = false">取 消</el-button>
            <el-button type="primary" @click="sureaddclass">确 定</el-button>
          </span>
        </el-dialog>
        <!-- 列表 -->
        <tree-table :data = 'goodsdata' :columns="columns"
         show-index :expand-type='false' :show-row-hover = 'false'
         :selection-type = 'false' style="font-size:16px" index-text = '#' border>
         <!-- 是否有效 -->
          <template slot="isok" slot-scope="scope">
            <i class="el-icon-success" style="color:rgb(107, 173, 91)" v-if = 'scope.row.cat_deleted === false'></i>
            <i class="el-icon-error" style="color:rgb(182, 79, 79)" v-else></i>
          </template>
         <!-- 级别 -->
          <template slot="level" slot-scope="levels">
            <el-tag v-if="levels.row.cat_level === 0">一级</el-tag>
            <el-tag type="success" v-else-if="levels.row.cat_level === 1">二级</el-tag>
            <el-tag type="warning" v-else>三级</el-tag>
          </template>
         <!-- 操作 -->
          <template slot="operation" slot-scope="operations">
            <el-button type="primary" icon="el-icon-edit" size = 'small'>编辑</el-button>
            <el-button type="warning" icon="el-icon-delete" size = 'small'>删除</el-button>
          </template>
        </tree-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[5, 10,20, 40]"
          :page-size="5"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </el-card>
    </div>
</template>

<script>
export default {
    data() {
        return {
          goodstype:{
            type:3,
            pagenum:1,
            pagesize:5
          },
          total:0,
          goodsdata:[],
          columns:[
            {
              label:'商品名称',
              prop:'cat_name'
            },
            {
              label:'是否有效',
              minWidth: '200px',
              type: 'template',
              template: 'isok'
            },
            {
              label:'级别',
              minWidth: '200px',
              type: 'template',
              template: 'level'
            },
            {
              label:'操作',
              minWidth: '200px',
              type: 'template',
              template: 'operation'
            }
          ],
          thisgoods:{
            cat_name:''
          },
          addshow:false,
          rules: {//设置添加用户验证
          cat_name: [
            { required: true, message: '请输入分类名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }],
          },
          goodslist:[],
          defaultProps: {
          value:'cat_id',
          children: 'children',
          label: 'cat_name'
          },
          goodsclassid:[],
          cat_level:0,//分类层级
          cat_pid:0//分类父id
        };
    },
    created() {},
    computed:{},
    mounted() {
      this.gogoodsdata()
    },
    methods: {
      async gogoodsdata(){//获取商品分类列表
        const {data:res} = await this.$http.get('categories',{params:this.goodstype})
        // console.log(res);
        if(res.meta.status =!200) return this.$message.error('获取商品分类失败')
        this.goodsdata =res.data.result
        this.total =res.data.total
      },
      async addclass(){
        this.addshow =true
        const {data:res} = await this.$http.get('categories',{params:{type:2}})
          if(res.meta.status =! 200) return this.$message.error('获取商品分类失败')
          this.goodslist =res.data
          // console.log(res.data);
       },
       //选择了列表
       changegoods(){
         this.cat_level = this.goodsclassid.length
         if(this.goodsclassid.length === 0){
           return this.cat_pid = 0
         }else if(this.goodsclassid.length === 1){
           return this.cat_pid = this.goodsclassid[0]
         }else{
           return this.cat_pid =this.goodsclassid[1]
         }
        },
      //确定提交新增分类
      sureaddclass(){
        // console.log(this.thisgoods.cat_name);
        // console.log(this.cat_pid);
        // console.log(this.cat_level);
        this.$refs.goodsFrom.validate(async vaild =>{
          if(!vaild) return
          const {data:res} = await this.$http.post('categories',
          {cat_pid:this.cat_pid,cat_name:this.thisgoods.cat_name,cat_level:this.cat_level})
          if(res.meta.status =! 200) return this.$message.error('添加分类失败')
          this.$message.success('创建分类成功')
          this.addshow =false
          this.gogoodsdata()
        })
      },
      //分页
      handleSizeChange(val) {
        this.goodstype.pagesize =val
        this.gogoodsdata()
      },
      handleCurrentChange(val) {
        this.goodstype.pagenum =val
        this.gogoodsdata()
      }
    }
};
</script>

<style scoped>
.el-card{
  margin-top: 20px;
}
.addclass{
  margin-bottom: 20px;
}
.el-cascader{
  width: 100%;
}
</style>
